<template>
	<view  :style="viewColor">
		<view class="search-box">
			<view class="search-ph acea-row row-between-wrapper">
				<!-- <input type="text" />
				<text class="iconfont icon-ic_search mr-10 text-12"></text>请输入景点名称 -->
				<text class='iconfont icon-ic_search mr-10'></text>
				<input type='text' :value='searchScenicValue'  placeholder='请输入景点名称' placeholder-class='placeholder'
				@input="setScenicValue" ></input>
			</view>
			<view class="search-button" @click="searchScenicHand">
				搜索
			</view>
		</view>
		<view class="scenic-box display-flex-column">
			<view class="scenic-title-box">
				<view class="scenic-title">
					热门景点
				</view>
				<view class="scenic-tip" @click="goScenicList">
					更多景点 <text class="iconfont icon-ic_right ml-2 text-12"></text>
				</view>
			</view>
			<view class="productList" v-if="scenicList.length">
				<scroll-view :scroll-y="true">
					<view class='list acea-row row-between-wrapper on'>
						<view class='item on' hover-class='none' v-for="(item,index) in scenicList" :key="index"
						 @click="goScenicDetail(item)">
							<view class='pictrue on skeleton-rect'>
								<image v-if="item.image_path" :src='item.image_path'  class="on"></image>
								<image v-else :src='no_image'  class="on"></image>
							</view>
							<view class='text on acea-row row-column-between'>
								<view class='name line1 display-flex display-flex-align-center skeleton-rect'>
									<text class="text_name line2">{{item.name}}</text>
									<text v-if="item.grade" class="scenic-level">{{item.grade}}A</text>
								</view>
					
								<view v-if="item.label_data.length" class="skeleton-rect item_tags acea-row line1 mt-10">
									<text class="tags_item labels" v-for="(label,labelIndex) in item.label_data" :key="labelIndex">{{label}}</text>
								</view>
								 
								<view class="score skeleton-rect" style="height: 20px;">
									<text>{{item.city}}·{{item.county}}</text>
									<text class="ml-5" v-if="item.dis">距您{{item.dis}}km</text>
								</view>
								<view class="display-flex display-flex-align-center skeleton-rect">
									<view class="">
										<view class="score">{{item.rate?item.rate+'分':'暂无评分'}} {{item.reply_count}}条评论</view>
									</view>
									<view class="skeleton-rect ml-auto text-12" v-if="item.is_free ">
										<text>免费开放</text>
									</view>
									<view v-else class="display-flex display-flex-align-center ml-auto">
										<view v-if="item.cost" class="display-flex display-flex-align-end">
											<priceFormat class="ml-auto mr-5 color-f60"  :price="item.cost" weight intSize="40" floatSize="26" labelSize="26"></priceFormat>
											<text class="text-10 color-66">起</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class='noCommodity' v-else>
				<view class='pictrue' style="margin: 60rpx auto;">
					<image :src="`${domain}/static/images/no_thing.png`"></image>
					<view>暂无景点，去看点其他的吧</view>
				</view>
			</view>
		</view>
		  	   
	</view>
</template>

<script>
	import { configMap } from "@/utils";
	import { mapGetters } from "vuex";
	import {
		getScenicListApi,
	} from '@/api/store.js';
	import Cache from '@/utils/cache';
	import {  getCityInfo } from '@/api/api.js';
	import { CITY_INFO ,USER_LOCATION} from '@/config/cache'
	import { HTTP_REQUEST_URL } from '@/config/app';
export default {
	

  name: "tabScenic",
 
computed: { ...mapGetters(['viewColor'])},  
data() {
    return {
	domain: HTTP_REQUEST_URL,
	  where: {
	  	page:1,
	  	limit:5,
	  	lng: '',
	  	lat: '',
	  },
	  scenicList: [],
	  searchScenicValue: '',
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
		this.get_scenic_list();
      }, 100);
    });
  },
  methods: {
	searchScenicHand(){
		uni.navigateTo({
			url: `/pages/scenic/index/index?searchValue=${this.searchScenicValue}`
		})	
	}, 
	
	goScenicList(){
		uni.navigateTo({
			url: `/pages/scenic/index/index`
		})	
	},
	setScenicValue(event){
		this.$set(this, 'searchScenicValue', event.detail.value);
	},
	get_scenic_list: function(isPage) {
		
		var that = this
	    if(Cache.has(USER_LOCATION)){
	    	// var cityLoc = JSON.parse(Cache.get(CITY_INFO)).lng_lat;
			var user_location = JSON.parse(Cache.get(USER_LOCATION));
			
			
			that.where.lng  = user_location.lng;
			that.where.lat  = user_location.lat;
	  //   	that.where.lng  = cityLoc.split(";")[0];
	  //   	that.where.lat  = cityLoc.split(";")[1];
	    }

		getScenicListApi(that.where).then(res => {
			let scenicList = res.data.list;
			that.$set(that, 'scenicList', scenicList);
		
		}).catch(err => {

		});
	},  
	
	goScenicDetail(item) {
		uni.navigateTo({
			url: `/pages/scenic/detail/index?id=${item.id}`
		})	
		
	},
   
  }
}
</script>

<style  lang="scss">

.search-box{
	border-radius: 20px;
	border: 1px solid var(--view-theme);
	height: 35px;
	margin: 0 10px ;
	display: flex;
	align-items: center;
}
.search-ph{
	font-size: 12px;
	color: #4c4c4c;
	margin-left: 10px;
}
.search-button{
	width: 50px;
	border-radius: 20px;
	background-image: linear-gradient(270deg, var(--view-bntColor22) 0%, var(--view-bntColor21) 100%);
    margin-right: 5px;
	margin-left: auto;
	color: #ffffff;
	height: 24px;
	text-align: center;
	line-height: 24px;
	font-weight: 700;
}
.scenic-box{
	margin: 10px;
	
}
.scenic-title-box{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.scenic-title{
	font-size: 16px;
	font-weight: 700;
	color: #000;
}
.scenic-tip {
	font-size: 12px;
	color: #c8c8c8;
	margin-left: auto;
}



.productList .list {
	// padding: 0 20rpx;
	// margin-top: 168rpx;
}
.productList .list.on {
	background-color: #fff;
	padding-top: 24rpx;
}

.productList .list .item .text .money {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 10rpx;
		color: var(--view-priceColor);
	}
	.productList .list .item .text .money .num {
		font-size: 34rpx;
	}
	.productList .distance {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999999;
		.icon-ic_right {
			font-size: 24rpx;
			line-height: 24rpx;
		}
	}
	.productList .list .item .text .money .ticket-big {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 163rpx;
		height: 28rpx;
		margin-left: 10rpx;
		background-image: url(~static/images/yh.png);
		background-size: 100% 100%;
		font-size: 20rpx;
		font-weight: normal;
		padding: 0 10rpx;
	}
	.productList .list .item .text .score {
		margin-top: 10rpx;
		color: #737373;
		font-size: 22rpx;
	}
	.productList .list .item .text .company {
		display: flex;
		align-items: center;
		color: #737373;
		font-size: 22rpx;
		margin-top: 6rpx;
		.name {
			display: inline-block;
			width: 200rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.flex {
			display: flex;
			align-items: center;
			margin-left: 10rpx;
			color: #282828;
			.iconfont {
				font-size: 20rpx;
				margin-top: 4rpx;
			}
		}
	}
	.productList .list .item .foot-bar {
		width: 100%;
		height: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
		border-radius: 0px 0px 16rpx 16rpx;
		color: #fff;
		font-size: 24rpx;
		.icon-fenxiang {
			font-size: 24rpx;
			margin-right: 10rpx;
		}
		&.on {
			position: absolute;
			right: 0;
			bottom: 30rpx;
			width: 180rpx;
			height: 44rpx;
			border-radius: 22rpx;
		}
	}
	.scenic-level {
	    padding: 0 4px;
	    height: 16px;
	    line-height: 16px;
	    background: rgba(238, 241, 246, .6);
	    border-radius: 2px;
	    text-align: center;
	    margin-left: 4px;
	    color: #5678a8;
	    font-size: 10px;
	}	
	
	.productList .list .item.on {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-bottom: 32rpx;
			position: relative;
			margin-right: 10px;
		}
		.productList .list .item .pictrue.on {
			position: relative;
			width: 220rpx;
			// height: 250rpx;
			// min-height: 200px;
			max-height: 250px;
			.border-picture {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: center/cover no-repeat;
				border-radius: 16rpx;
			}
		}
		.productList .list .item .pictrue image {
			width: 220rpx;
			// height: 240rpx;
			// min-height: 200px;
			// max-height: 250px;
			border-radius: 20rpx 20rpx 0 0;
		}
		.productList .list .item .pictrue image.on {
			border-radius: 16rpx;
			width: 220rpx;
			height: 100%;
			// height: 250rpx;
		}
		.productList .list .item .text {
			font-size: 30rpx;
			color: #222;
			width: 460rpx;
			padding: 0 0 0 22rpx;
			.name{
				font-size:30rpx;
				font-weight: 700;
				margin-bottom: 5px;
			}
		}
		.productList .list .item .text.on {
			padding: 8rpx 0 0;
			// width: 420rpx;
			margin-left: 12px;
			// height: 250rpx;
		}
	.item_tags{
		margin-top: 8px;
	}
	.item_tags .tags_item {
		display: inline-block;
		font-size: 20rpx;
		text-align: center;
		border-radius: 5rpx;
		padding: 0 4rpx;
		line-height: 28rpx;
		margin-right: 8rpx;
	}
	.item_tags .tags_item.ticket{
		color: #E93323;
		border: 1px solid #E93323;
	}
	.item_tags .tags_item.delivery{
		color: #FF9000;
		border: 1px solid #FF9000;
	}
	.item_tags .tags_item.labels{
		color: var(--view-theme);;
		border: 1px solid #cad8f7;
	}
	.placeholder {
		color: #cccccc;
		font-size: 26rpx;
	}
</style>